<template>
  <!-- 直播课堂 -->
  <!-- 标题，关键词，共xx节，￥998, 888人购买 -->
  <div class="streaminglist" id="streaminglist">
    <Header></Header>
    <!--本来应该是导航，（方便全局替换）-->
    <div class="periodiCon_dynamic">
      <div class="caseCont_crumbs">
        <span>
          <router-link :to="{name:'home'}">首页</router-link>
        </span>
        <i class="iconfont icon-youjiantou"></i>
        <span>
          <router-link :to="{name:'streaming'}">直播课堂</router-link>
        </span>
        <i class="iconfont icon-youjiantou"></i>
        <span>课程列表</span>
      </div>
      <div class="periodiCon_cluster_nav">
        <p class="periodiCon_cluster_nav_tot">课程分类</p>
        <div style="width:100%" class="periodiCon_cluster_nav_tot_div">
          <ul>
            <li v-for="(item,index) in periodiCnav" :key="index" @click="periodiC_tab(item.type,index)">
              <div
                class="periodiCon_cluster_nav_tot_tit"
                :style="{backgroundImage: 'url(' + (item.bg) + ')'}"
                style="backgroundSize:cover;"
              >
                <p>{{item.name}}</p>
              </div>
              <div class="periodiCon_cluster_nav_tot_cover" v-show="showfalse == item.type">
                <img src="../../../static/zbsy/zbbj6.png" alt />
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="periodiCon_cluster_cont">
        <div class="periodiCon_cluster_cont_nav">
          <ul>
            <li
              v-for="(item,index) in cont_nav"
              :key="index"
              :class="{contNav:contNav == index+1}"
              @click="getlistNav(index+1)"
            >
              <a>{{item.name}}</a>
            </li>
          </ul>
        </div>
        <div class="periodiCon_cluster_cont_main">
          <ul v-if="periodiContList.length == 0">
            <div class="periodiCon_cluster_cont_main_nolist">
              <img src="../../../static/zb/ky.png" alt />
              <p>暂无此直播课程，敬请期待哦！</p>
            </div>
          </ul>
          <ul>
            <li v-for="(item,index) in periodiContList" :key="index" @click="periodiCon(item)">
              <div class="periodiCon_cluster_Cont_img">
                <img :src="item.CoverPicturePath" alt />
              </div>
              <div class="periodiCon_cluster_Cont_right">
                <div class="periodiCon_cluster_Cont_right_tit">
                  <span
                    class="periodiCon_cluster_Cont_right_tit_tit"
                    style="display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;"
                  >{{item.CourseName}}</span>
                  <span
                    class="periodiCon_cluster_Cont_right_tit_huifang"
                    @click="huifang(item)"
                    @click.stop
                    v-if="item.IsPlayBack == true"
                  >精彩回放</span>
                  <div style="clear:both;"></div>
                </div>
                <p>
                  <span
                    v-for="(itemc,index) in (item.Label || '').split(',')"
                    :key="index"
                  >{{itemc}}</span>
                </p>
                <p style="text-decoration:line-through" v-if="item.DisCount < 1">￥{{item.Price}}.00</p>
                <p v-if="item.DisCount >= 1">￥{{item.Price}}.00</p>
                <p>
                  <span v-if="item.DisCount < 1">
                    {{parseInt(item.DisCount * 10)}}折后：
                    <span
                      style="font-size:21px"
                    >￥{{(item.Price * item.DisCount).toFixed(2)}}</span>
                  </span>
                  <span>{{item.NumberPeople}}人报名</span>
                </p>
              </div>
              <div style="clear:both;"></div>
            </li>
            <div style="clear:both;"></div>
          </ul>
        </div>
      </div>
    </div>
    <div class="mowhite"></div>
    
	<Alerts :flag="flag" @comfig="comfig"></Alerts>
  </div>
</template>

<script>
// import router from "@/router/index";
//juqery 
export default {
  data() {
    return {
      contNav: this.contNav,
      periodiCnav: [
        {
          type: "0",
          bg: "../../../static/zbsy/zbbj1.png",
          name: "全部课程"
        },
        {
          type: "2",
          bg: "../../../static/zbsy/zbbj2.png",
          name: "精品课程"
        },
        {
          type: "3",
          bg: "../../../static/zbsy/zbbj4.png",
          name: "1v1课程"
        },
        {
          type: "4",
          bg: "../../../static/zbsy/zbbj5.png",
          name: "预备课程"
        },
        {
          type: "5",
          bg: "../../../static/zbsy/zbbj8.png",
          name: "速成班"
        },
        {
          type: "1",
          bg: "../../../static/zbsy/zbbj3.png",
          name: "SCI课程"
        }
      ],
      cont_nav: [{ name: "即将开始" }, { name: "已结束" }],

      periodiConact: 0,
      showfalse: 0,
      periodiContList: [],

      // 折后价格
      zheprice: "",
      // 折扣
      disCount: "",
	  page:{
		  pageSize:10,
		  currentPage:1,
	  },
	  flag: false,
    };
  },
  methods: {
	  comfig(type) {
	  	this.flag = false;
	  	if (type) {
	  		this.$uniRouter.push({
	  			path: "/login",
	  		});
	  	}
	  },
    getInfo() {
      this.page.currentPage = 1;
      this.getTableData(this.contNav);
    },

    // 获取直播课程数据
    // StartType：3 已结束全部课程
    getTableData(index) {
      this.contNav = index;
      // 加密完成
      this.$httphelper
        .post("/api/LmCourseApi/GetCouresPageList", {
          Sign: "string",
          Limit: this.page.pageSize,
          Page: this.page.currentPage,
          Type: this.periodiConact,
          StartType: index
        })
        .then(res => {
          this.periodiContList = res.data.data;
          this.periodiContList.forEach(item => {
            this.disCount = parseInt(item.DisCount * 10);
            this.zheprice = (item.Price * item.DisCount).toFixed(2);
          });
          this.page.total = res.data.totalcount;
        })
        .catch(e => {
          console.log(e);
        });
    },

    handleCurrentPageChange(val) {
      this.page.currentPage = val;
      this.getTableData();
    },

    // 点击查看详情需登录
    periodiCon(item) {
      let userName = this.$sessionStorage.getItem('userName');
      if(userName){
        this.$uniRouter.push({
          path: "/streaming/streamingdetail",
          query: {
            OpCourseId: item.OpenId,
            type: "2",  
            Hftype: 1,
            coursetype: this.periodiConact,
            contNav: this.contNav
          }
        });
      } else {
       this.flag = true
      }
    },

    // 点击切换模块数据
    periodiC_tab(type,index) {
      this.periodiConact = type;
      this.showfalse = type;
      this.getTableData(index);

      // this.$uniRouter.push({
      //   path: "/streaming/streamingHome",
      //   query: {
      //     coursetype: type,
      //     contNav: 1
      //   }
      // });
    },

    // 点击切换是否直播过
    getlistNav(index) {
      this.contNav = index;
      this.getTableData(index);

      this.$uniRouter.push({
        path: "/streaming/streamingHome",
        query: {
          coursetype: this.periodiConact,
          contNav: index
        }
      });
    },

    // 精彩回放
    huifang(item) {
      this.$uniRouter.push({
        path: "/streaming/streamingdetail",
        query: {
          OpCourseId: item.OpenId,
          Hftype: 2,
          type: 2,
          coursetype: this.periodiConact,
          contNav: this.contNav
        }
      });
    }
  },
  onLoad() {
    this.showfalse =this.$uniRoute().coursetype;
    this.contNav = this.$uniRoute().contNav;
  },
  mounted() {
    this.periodiConact = this.$uniRoute().coursetype;
    this.getInfo();
  }
};
</script>

<style lang="less" scoped>
#streaminglist {
  /deep/.el-pagination__total {
    display: none !important;
  }
  /deep/.el-pagination__sizes {
    display: none !important;
  }
  /deep/.el-pagination {
    text-align: center;
  }
  .periodiCon_dynamic {
    margin: 0 auto;
    position: relative;
    .caseCont_crumbs {
      height: 40rpx;
      margin: 0 auto;
      position: relative;
      margin-top: 56rpx;
      text-align: left;
      line-height: 40rpx;
      padding-left: 20rpx;
      span:nth-child(1) a {
        color: #000000;
        font-size: 32rpx;
        font-weight: bold;
        cursor: pointer;
      }
      i {
        color: #767c82;
        font-size: 36rpx;
        margin-left: 20rpx;
        font-weight: bold;
      }
      span:nth-child(3) a,
      span:nth-child(5) {
        color: #000000;
        font-size: 32rpx;
        margin-left: 20rpx;
        font-weight: bold;
        cursor: pointer;
      }
    }
    .periodiCon_cluster_nav {
      width: 100%;
      padding: 56rpx 32rpx;
      border-bottom: 2rpx solid #e6e6e6;
      .periodiCon_cluster_nav_tot {
        color: #000000;
        font-size: 36rpx;
        width: 148rpx;
        font-weight: bold;
        float: left;
        line-height: 144rpx;
      }
      ul {
        display: inline-block;
        margin-left: 48rpx;
        li {
          width: 288rpx;
          height: 144rpx;
          list-style: none;
          float: left;
          margin-right: 48rpx;
          position: relative;
          .periodiCon_cluster_nav_tot_tit {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
            p {
              color: #ffffff;
              font-size: 32rpx;
              font-weight: bold;
              text-align: center;
              line-height: 144rpx;
              cursor: pointer;
            }
          }
          .periodiCon_cluster_nav_tot_cover {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.3);
            img {
				width: 44rpx;
				height: 44rpx;
              position: absolute;
              right: 0;
            }
          }
        }
      }
    }
    .periodiCon_cluster_cont {
      width: 100%;
      height: auto;
      .periodiCon_cluster_cont_nav {
        width: 100%;
        height: 100rpx;
        ul {
          height: 100rpx;
          .contNav {
            a {
              color: #003c80;
              font-weight: bold;
            }
          }
          li {
            width: 280rpx;
            height: 100rpx;
            list-style: none;
            float: left;
            line-height: 100rpx;
            text-align: center;
            a {
              font-size: 32rpx;
              color: #000000;
              border-right: 2rpx solid #eeeeee;
              padding-right: 68rpx;
              padding-left: 68rpx;
            }
          }
        }
      }
      .periodiCon_cluster_cont_main {
        width: 100%;
        height: auto;
        .periodiCon_cluster_cont_main_nolist {
          width: 100%;
          height: 626rpx;
          text-align: center;
          img {
            width: 696rpx;
            height: 262rpx;
          }
          p {
            letter-spacing: 6rpx;
            color: #333;
            font-size: 50rpx;
          }
        }
        ul {
          width: 100%;
          height: auto;
          li:hover {
            background: #f7f8fa;
            .periodiCon_cluster_Cont_right {
              .periodiCon_cluster_Cont_right_tit {
                .periodiCon_cluster_Cont_right_tit_tit {
                  color: #003c80;
                }
              }
            }
          }
          li {
            width: 100%;
            padding: 30rpx 26rpx;
            list-style: none;
            border-bottom: 2rpx solid #e6e6e6;
            cursor: pointer;
            .periodiCon_cluster_Cont_img {
              width: 360rpx;
              height: 246rpx;
              float: left;
              position: relative;
              img {
                width: 100%;
                height: 100%;
              }
              .periodiCon_cluster_Cont_cover {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(
                  0deg,
                  rgba(0, 0, 0, 0.6) 0%,
                  rgba(0, 0, 0, 0.3) 100%
                );
                i {
                  font-size: 80rpx;
                  color: #fff;
                  position: absolute;
                  left: 39%;
                  top: 27%;
                }
              }
            }
            .periodiCon_cluster_Cont_right {
              height: 248rpx;
              float: right;
              .periodiCon_cluster_Cont_right_tit {
                width: 100%;
                .periodiCon_cluster_Cont_right_tit_tit {
                  // width: 60%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  line-clamp: 1;
                  /* autoprefixer: off */
                  -webkit-box-orient: vertical;
                  /* autoprefixer: on */
                  color: #333;
                  font-size: 36rpx;
                  float: left;
                }
                .periodiCon_cluster_Cont_right_tit_keyword {
                  display: inline-block;
                  span {
                    background: #eee;
                    border-radius: 18rpx;
                    line-height: 32rpx;
                    padding: 10rpx 12rpx;
                    display: inline-block;
                    font-size: 28rpx;
                    line-height: 1;
                    color: #777;
                    transform: scale(0.82);
                  }
                }
                .periodiCon_cluster_Cont_right_tit_huifang:hover {
                  background: #003c80;
                  color: #fff;
                }
                .periodiCon_cluster_Cont_right_tit_huifang {
                  display: inline-block;
                  border: 2rpx solid #003c80;
                  font-size: 28rpx;
                  color: #003c80;
                  padding: 4rpx 30rpx;
                  position: relative;
                  cursor: pointer;
                }
                .periodiCon_cluster_Cont_right_tit_huifang {
                  float: right;
                }
                a {
                  color: #333;
                  font-size: 36rpx;
                }
              }
              p:nth-child(2) {
                width: 85%;
                height: auto;
                margin-top: 18rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                /* autoprefixer: off */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
                span {
                  background: #eee;
                  border-radius: 18rpx;
                  line-height: 32rpx;
                  padding: 10rpx 12rpx;
                  display: inline-block;
                  font-size: 28rpx;
                  line-height: 1;
                  color: #777;
                  transform: scale(0.82);
                }
              }
              p:nth-child(3) {
                width: 100%;
                font-size: 38rpx;
                margin-top: 18rpx;
                color: #003c80;
                font-family: "Hiragino Sans GB", "Microsoft Yahei", arial,
                  \5b8b\4f53, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
              }
              p:nth-child(4) {
                width: 100%;
                font-size: 30rpx;
                margin-top: 0rpx;
                color: #999;
                span:nth-child(1) {
                  color: #333;
                  font-family: "Hiragino Sans GB", "Microsoft Yahei", arial,
                    \5b8b\4f53, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
                  position: relative;
                  top: 2rpx;
                  span {
                    color: #003c80;
                  }
                }
                span:nth-child(2) {
                  float: right;
                  position: relative;
                  top: 2rpx;
                }
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1010px) {
  .periodiCon_dynamic {
    width: 100% !important;
    .periodiCon_cluster_Left {
      width: 100% !important;
    }
  }

  .streaminglist {
    margin-top: 30rpx;
    .caseCont_crumbs {
      display: none;
    }
    .periodiCon_cluster_nav {
      width: 94% !important;
      padding: 0rpx !important;
      margin: 0 auto;
      .periodiCon_cluster_nav_tot {
        width: 100% !important;
        line-height: 70rpx !important;
      }
      .periodiCon_cluster_nav_tot_div {
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
        ul {
          width: 259% !important;
          margin-top: 42rpx;
          margin-left: 0 !important;
          padding-bottom: 32rpx;
          li {
            margin-right: 18rpx !important;
            width: 15% !important;
          }
        }
      }
    }
    .periodiCon_cluster_cont {
      width: 94% !important;
      margin: 0 auto;
      .periodiCon_cluster_cont_main {
        width: 100% !important;
        ul {
          width: 100%;
          height: 100%;
          li {
            width: 45% !important;
            padding: 30rpx 16rpx !important;
            position: relative;
            float: left;
            .periodiCon_cluster_Cont_img {
              width: 100% !important;
              height: 246rpx !important;
            }
            .periodiCon_cluster_Cont_right {
              width: 100% !important;
              height: 204rpx !important;
              .periodiCon_cluster_Cont_right_tit {
                span {
                  font-size: 32rpx !important;
                }
              }
              p:nth-child(2) {
                margin-top: 4rpx !important;
              }
              p:nth-child(3) {
                margin-top: 4rpx !important;
                font-size: 32rpx !important;
              }
              p:nth-child(4) {
                margin-top: 4rpx !important;
                font-size: 28rpx !important;
                span:nth-child(1) span {
                  font-size: 32rpx !important;
                }
                span:nth-child(2) {
                  display: none;
                }
              }
              .periodiCon_cluster_Cont_right_tit_huifang {
                position: absolute !important;
                right: -6rpx !important;
                border: none !important;
                font-size: 26rpx !important;
                font-size: 28rpx !important;
                // top: 62px!important;
                top: 74% !important;
              }
            }
          }
        }
        .periodiCon_cluster_cont_main_nolist {
          width: 92% !important;
          height: 560rpx !important;
          margin: 0 auto;
          img {
            width: 100% !important;
            height: 83% !important;
          }
          p {
            font-size: 36rpx !important;
          }
        }
      }
    }
  }

  .mowhite {
    width: 100%;
    height: 210rpx;
    background: #fff;
  }

  /deep/.el-pagination {
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
  }
  .floorTitle {
    width: 94% !important;
    margin: 0 auto;
  }
  .el-pagination::-webkit-scrollbar {
    display: none;
  }
  .caseCont_cluster_Right {
    display: none !important;
  }
  .caseCont_crumbs {
    margin-top: 172rpx !important;
    display: none !important;
  }
}
@media screen and (min-width: 1010px) {
  .mowhite {
    display: none;
  }
}
</style>
<style>
@media screen and (max-width: 1010px) {
  .message-logout {
    width: 80% !important;
  }
}
</style>